<template>
  <div
    class="GridLayoutTest"
    style="width: 100%"
  > 
    <div class="main" ref="main">
      <div
        class="left"
        ref="left"
        :style="{width: leftWidth}"
      >
        11
      </div>
      <my-drag
        class="demo"
        axis="h"
        @drag="drag"
        ref="drag"
        :range="range"
      />
      <div
        class="right"
        ref="right"
        :style="{width: rightWidth}"
      >
        22
      </div>
    </div>
    <el-button @click="test">
      test
    </el-button>
    <el-input
      v-model="num"
      type="number"
    />
    <!-- <grid-layout
      :layout.sync="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        class="gridItem"
      >
        {{ item.i }}
      </grid-item>
    </grid-layout> -->
  </div>
</template>

<script>
// import VueGridLayout from 'vue-grid-layout'
import {MyDrag} from '$ui'

let testLayout = [
  {"x":0,"y":0,"w":2,"h":2,"i":"0"},
  {"x":2,"y":0,"w":2,"h":4,"i":"1"},
  {"x":4,"y":0,"w":2,"h":5,"i":"2"},
  {"x":6,"y":0,"w":2,"h":3,"i":"3"},
  {"x":8,"y":0,"w":2,"h":3,"i":"4"},
  {"x":10,"y":0,"w":2,"h":3,"i":"5"},
  {"x":0,"y":5,"w":2,"h":5,"i":"6"},
  {"x":2,"y":5,"w":2,"h":5,"i":"7"},
  {"x":4,"y":5,"w":2,"h":5,"i":"8"},
  {"x":6,"y":3,"w":2,"h":4,"i":"9"},
  {"x":8,"y":4,"w":2,"h":4,"i":"10"},
  {"x":10,"y":4,"w":2,"h":4,"i":"11"},
  {"x":0,"y":10,"w":2,"h":5,"i":"12"},
  {"x":2,"y":10,"w":2,"h":5,"i":"13"},
  {"x":4,"y":8,"w":2,"h":4,"i":"14"},
  {"x":6,"y":8,"w":2,"h":4,"i":"15"},
  {"x":8,"y":10,"w":2,"h":5,"i":"16"},
  {"x":10,"y":4,"w":2,"h":2,"i":"17"},
  {"x":0,"y":9,"w":2,"h":3,"i":"18"},
  {"x":2,"y":6,"w":2,"h":2,"i":"19"}
]

// const GridLayout = VueGridLayout.GridLayout
// const GridItem = VueGridLayout.GridItem
  
export default {
  name: 'GridLayoutTest',
  components: {
    // GridLayout,
    // GridItem,
    MyDrag,
  },
  data() {
    return {
      layout: testLayout,
      num: 0,
      temp: 0,
      startNum: 0,
      // range: {
      //   left: 200,
      //   width: 800
      // },
      leftWidth: `calc(30%)`, // `calc(30% + ${num - 2}px)`
      rightWidth: `calc(70%)`,
      screenWidth: document.body.clientWidth
    }
  },
  computed: {
    // range: function () {
    //   console.log(this.$refs.main)
    //   if(!this.$refs.main) return {}
    //   let width = this.$refs.main.clientWidth
    //   return {
    //     left: width * 0.2,
    //     width: width * 0.4,
    //   }
    // }
    range: function () {
      console.log(this.screenWidth * 0.1)
      return {
        left: this.screenWidth * 0.1,
        width: this.screenWidth * 0.3,
        // left: 200,
        // width: 800,
      }
    }
  },
  watch: {
    // "$refs.drag.$el.offsetLeft": (value) => {
    //   console.log('宽度' + value)
    // }
    screenWidth: (val) => {
      
    }
  },
  mounted() {
    // console.log(this.layout);
    const that = this
    window.onresize = () => {
      return (() => {
          window.screenWidth = document.body.clientWidth
          that.screenWidth = window.screenWidth
      })()
    }
  },
  methods: {
    drag(drag) {
      // this.num = (drag.startX - drag.clientX) * -1 + this.temp

      // console.log('drag',this.$refs.drag.$el.style.left)
      // if(this.getPixel(this.$refs.drag.$el.style.left) <= 200) return
      // this.leftWidth = drag.clientX / drag.getOrigin().width * 100 + '%'
      // this.rightWidth = (1 - drag.clientX / drag.getOrigin().width) * 100 + '%'
      // this.$refs.drag.$el.style.left = drag.clientX / drag.getOrigin().width * 100 + '%'

      let width = drag.clientX
      if (width > this.range.left + this.range.width) {
        width = this.range.left + this.range.width
      } else if (width < this.range.left) {
        width = this.range.left
      }
      this.leftWidth = width + 'px'
    },
    // stop(drag) {
    //   // this.num = (drag.startX - drag.clientX) * -1 + this.temp
    //   // this.temp = this.num - 2
      
    //   // console.log('stop',this.getPixel(this.$refs.drag.$el.style.left))
    // },
    test() {
      // console.log(this.$refs.left)
      // console.log(this.$refs.right)
      // console.log(this.$refs.main.clientWidth)
      // console.log(this.$refs.drag)
      // console.log(this.$refs.drag.$el.offsetLeft);
      // let width = this.$refs.main.clientWidth
      // this.range = {
      //   left: width * 0.2,
      //   width: width * 0.4,
      // }
      this.$refs.drag.$el.style.left = 'calc(50% - 4px)'
    },
    getPixel(px) {
      return Number(px.replace('px', ''))
    }
  }
}
</script>

<style lang="scss" scoped>
  .gridItem{
    border: 1px solid black;
  }
  .main{
    width: 100%;
    height: 500px;
    display: flex;
    overflow: hidden;
    position: relative;

    .left{
      height: 100%;
      background: burlywood;
      min-width: 10%;
    }

    .right{
      height: 100%;
      background: cadetblue;
      flex: 1;
    }

    .demo{
      width: 4px;
      height: 100%;
      left: calc(30% - 4px);
      background: chartreuse;
    }
  }
</style>